<template>
	<div class="shipinsousuo">
		<!--上级-->
		<div class="fensiqian">
			<div class="darensou">
				<div class="darensou1">
					<input type="search" value="" placeholder="请输入商品名称" />
					<button style="cursor: pointer;">
						<i class="el-icon-search"></i>
					</button>
				</div>
			</div>
			
			<div class="shangfei">
				<div class="shangfei1">
					商品分类
				</div>
				<div class="shangfei2">
					<div class="buxian1">
						全部
					</div>
				</div>
				<div class="shangfei3">
					<div class="shangfei3_2">
						<ul>
							<li v-for="(item,index) in 15" :key="index">
								运动户外
							</li>
						</ul>
					</div>
				</div>
			</div>
			
			<div class="darenfensi">
				<div class="darenfensi1">
					筛选条件
				</div>
				<div class="darenfensi3">
					<div class="darenfensi3_1">
						<ul>
							<li v-for="(item,index) in 3" :key="index">
								全部
							</li>
						</ul>
					</div>
				</div>
			</div>
			
			<div class="fabushi">
				<div class="fabushi1">
					发布时间
				</div>
				<div class="fabushi2">
					<div class="fabushi2_1">
						<ul>
							<li v-for="(item,index) in shijian" :key="index">
								{{item.name}}
							</li>
						</ul>
					</div>
				</div>
				
				<div class="fabushi3">
					<div class="dianzan1" v-for="(item,index) in dianzan" :key="index">{{item.name}}</div>
				</div>
			</div>
		</div>
		
		<div class="xiangshipin">
			<div class="xiangshipin1" v-for="(item,index) in 8" :key="index">
				<div class="xiangshi1">
					<img src="../../../../assets/img/darentu.png" />
				</div>
				<div class="xiangshi2">
					一直流浪狗狗的前半生。#领样代替购买
				</div>
				<div class="xiangshi3">
					<div class="xiangshi3_1">
						<img src="../../../../assets/img/dianzan3.png" />
						<span>{{zan | guolv}}</span>
					</div>
					<div class="xiangshi3_1">
						<img src="../../../../assets/img/xinxitiao.png" />
						<span>{{pin | guolv}}</span>
					</div>
					<div class="xiangshi3_1">
						<img src="../../../../assets/img/bofang1.png" />
						<span>{{fen | guolv}}</span>
					</div>
				</div>
				<div class="xiangshi4">
					<div class="xiangshi4_1">
						<img src="../../../../assets/img/datou.png" />
						<span>CN棍哥的温柔香GB</span>
					</div>
					<div class="xiangshi4_2">
						2020-10-25
					</div>
				</div>
			</div>
		</div>
		
		<div class="fenye">
			<el-pagination
			  @size-change="handleSizeChange"
			  @current-change="handleCurrentChange"
			  :hide-on-single-page="yindi"
			  :current-page="currentPage4"
			  :page-sizes="[100, 200, 300, 400]"
			  :page-size="100"
			  layout="total, sizes, prev, pager, next, jumper"
			  :total="4001">
			</el-pagination>
		</div>
		
	</div>
</template>

<script>
	export default{
		name:"shipinsousuo",
		data(){
			return{
				zan:6044856,
				pin:456415,
				fen:456156415,
				dianzan:[
					{name:'点赞最多'},{name:'分享最多'}
				],
				shijian:[
					{name:"近24小时"},{name:"近3天"},{name:"近7天"},{name:"近30天"},{name:"近90天"}
				],
				//分页
				yindi:true,//当数据是由一页时，就不显示分页器
				currentPage4: 1,
				
			}
		},
		activated() {
			
		},
		//过滤器
		filters:{
			guolv(shuzi){
				  if(shuzi>0){
					var wan=parseInt(shuzi).toString();
					var qumo=wan%10000;
					//粉丝数改变
					if(wan.length<5){
						shuzi=wan;
					}else if(wan.length>4 && wan.length<=8){
						let fen_si=parseFloat(parseInt(wan/10000))+'.'+qumo.toString().substring(0,2)+'w';
						shuzi=fen_si;
					}else if(wan.length>8){
						let fen_si=parseFloat(parseInt(wan/100000000))+'.'+qumo.toString().substring(0,2)+'亿';
						shuzi=fen_si;
					}
				  }
				  return shuzi
			}
		},
		mounted:function(){
			//出现加载动画开始和结束
			this.$store.commit("startLoading")
			this.$store.commit("endLoading")
			
			//点赞切换
			$(".dianzan1").click(function(){
				$(this).css({
					"color":"#fff",
					"background-color": "#0091FF"
				})
				$(this).siblings().css({
					"color":"#0091FF",
					"background-color": "#fff"
				})
			})
			
			//发布时间
			$(".fabushi2_1 ul li").click(function(){
				$(this).css({
					"background-color": "#0091FF",
					"color":"#fff"
				})
				$(this).siblings().css({
					"background-color": "#fff",
					"color":"#999"
				})
			})
			
			//筛选条件
			$(".darenfensi3_1 ul li").click(function(){
				$(this).css({
					"background-color": "#0091FF",
					"color":"#fff"
				})
				$(this).siblings().css({
					"background-color": "#fff",
					"color":"#999"
				})
			})
			
			//视频分类
			$(".shangfei3_2 ul li").click(function(){
				$(this).css({
					"background-color": "#0091FF",
					"color":"#fff"
				})
				$(this).siblings().css({
					"background-color": "#fff",
					"color":"#999"
				})
				$(this).parents(".shangfei3").siblings(".shangfei2").children(".buxian1").css({
					"background-color": "#fff",
					"color":"#999"
				})
			})
			$(".buxian1").click(function(){
				$(this).css({
					"background-color": "#0091FF",
					"color":"#fff"
				})
				$(this).parents(".shangfei2").siblings(".shangfei3").children(".shangfei3_2").children("ul").children("li").css({
					"background-color": "#fff",
					"color":"#999"
				})
			})
		},
		methods:{
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			},
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.shipinsousuo{
		.fensiqian{
			background-color: #fff;
			border-radius:0.1rem ;
			padding: 1rem 0.8rem;
			.darensou{
				
				.darensou1{
					float: left;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border: 1px solid #D4D4D4;
					
					input{
						border: none;
						outline: none;
						width: 7rem;
						height: 1.1rem;
						letter-spacing: 0.02rem;
						padding-left:0.4rem ;
						font-size: 0.4rem;
					}
					input::placeholder{
						color: #D3D3D3;
						font-size: 0.35rem;
					}
					button{
						border: none;
						outline: none;
						padding: 0.3rem;
						background-color: #fff;
						font-size: 0.4rem;
					}
				}
				.darensou2{
					float: left;
					margin-left:1rem ;
					color: #333333;
					font-size: 0.5rem;
					letter-spacing: 0.05rem;
					margin-top:0.2rem ;
					
					span{
						color: #0091FF;
					}
				}
			}
			.darensou::after{
				content: "";
				display: block;
				clear: both;
			}
			
			.shangfei{
				margin-top:1rem ;
				display: flex;
				justify-content: space-between;
				
				.shangfei1{
					flex: 1;
					color: #333333;
					font-size: 0.45rem;
				}
				.shangfei2{
					line-height: 0.3rem;
					flex: 1;
					.buxian1{
						cursor: pointer;
						color: #fff;
						font-size: 0.4rem;
						background-color: #0091FF;
						padding: 0.1rem 0.4rem;
						display: inline;
					}
				}
				.shangfei3{
					flex: 11;
					
					.shangfei3_2{
						ul{
							list-style: none;
							margin-left:0.5rem ;
							li{
								cursor: pointer;
								margin-bottom:0.8rem ;
								color: #999999;
								font-size: 0.4rem;
								padding: 0.1rem 0.4rem;
								float: left;
								margin-right:0.4rem ;
							}
						}
						ul::after{
							content: "";
							display: block;
							clear: both;
						}
					}
				}
			}
			
			.darenfensi{
				margin-top:1rem ;
				display: flex;
				justify-content: space-between;
				
				.darenfensi1{
					flex: 1;
					color: #333333;
					font-size: 0.45rem;
				}
				.darenfensi3{
					flex: 12;
					
					.darenfensi3_1{
						
						ul{
							list-style: none;
							li{
								cursor: pointer;
								color: #999999;
								font-size: 0.4rem;
								padding: 0.1rem 0.4rem;
								float: left;
								margin-right:0.4rem ;
							}
							li:nth-of-type(1){
								cursor: pointer;
								color: #fff;
								font-size: 0.4rem;
								background-color: #0091FF;
								padding: 0.1rem 0.4rem;
								margin-right:0.7rem;
							}
							li:not(:first-child) {
								margin-left:1.3rem ;
							}
						}
						ul::after{
							content: "";
							display: block;
							clear: both;
						}
					}
				}
			}
			
			.fabushi{
				margin-top:1rem ;
				display: flex;
				justify-content: space-between;
				
				.fabushi1{
					flex: 1;
					color: #333333;
					font-size: 0.45rem;
				}
				.fabushi2{
					flex: 11;
					
					.fabushi2_1{
						
						ul{
							list-style: none;
							li{
								cursor: pointer;
								color: #999999;
								font-size: 0.4rem;
								padding: 0.1rem 0.4rem;
								float: left;
								margin-right:0.4rem ;
							}
							li:nth-of-type(1){
								cursor: pointer;
								color: #fff;
								font-size: 0.4rem;
								background-color: #0091FF;
								padding: 0.1rem 0.4rem;
								margin-right:0.4rem;
							}
							li:not(:first-child) {
								margin-left:1.3rem ;
							}
						}
						ul::after{
							content: "";
							display: block;
							clear: both;
						}
					}
				}
				.fabushi3{
					flex: 3;
					display: flex;
					align-items: center;
					
					.dianzan1{
						border-radius:0.1rem ;
						cursor: pointer;
						padding: 0.1rem 0.4rem;
						color: #0091FF;
						font-size: 0.4rem;
						background-color: #fff;
						border: 1px solid #D4D4D4;
					}
					.dianzan1:not(:first-child){
						margin-left:0.3rem ;
					}
				}
			}
		}
		
		.xiangshipin{
			margin-top:1rem ;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			
			.xiangshipin1{
				width: 23.5%;
				margin-bottom:1rem ;
				padding-bottom:0.6rem ;
				background-color: #fff;
				box-shadow: 0 0 0.2rem rgba(0,0,0,0.2rem);
				
				.xiangshi1{
					img{
						width: 100%;
					}
				}
				.xiangshi2{
					padding:0 0.8rem ;
					padding-top:0.6rem ;
					color: #333333;
					font-size: 0.4rem;
					
					overflow : hidden;
					text-overflow: ellipsis;
					display: -webkit-box; 
					-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
					-webkit-box-orient: vertical;
				}
				.xiangshi3{
					padding:0 0.8rem ;
					padding-top:0.6rem ;
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					.xiangshi3_1{
						cursor: pointer;
						display: flex;
						justify-content: space-between;
						align-items: center;
						img{
							width: 0.4rem;
							vertical-align: middle;
						}
						span{
							display: block;
							// margin-top:-0.05rem ;
							margin-left:0.2rem ;
							color: #999999;
							font-size: 0.35rem;
						}
					}
				}
				.xiangshi4{
					padding:0 0.8rem ;
					padding-top:0.6rem ;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.xiangshi4_1{
						display: flex;
						justify-content: space-between;
						align-items: center;
						img{
							width: 0.6rem;
							vertical-align: middle;
						}
						span{
							width: 4rem;
							margin-top:0.1rem ;
							display: block;
							margin-left:0.2rem ;
							color: #333333;
							font-size: 0.35rem;
							
							overflow : hidden;
							text-overflow: ellipsis;
							display: -webkit-box; 
							-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
							-webkit-box-orient: vertical;
						}
					}
					.xiangshi4_2{
						color: #999999;
						font-size: 0.35rem;
					}
				}
			}
		}
		
		.fenye{
			text-align: center;
		}
	}
</style>
